<template>
  <div class="containsClass">
    <div class="bodyClass">
      <div>
        <div class="titleClass">视力管理智能终端</div>
        <div class="boxClass">
          <div>账号登录</div>

          <a-form
            :form="form"
            :wrapper-col="{ span: 24 }"
            @submit="handleSubmit"
          >
            <a-form-item>
              <a-input
                placeholder="请输入账号"
                size="large"
                v-decorator="[
                  'phone',
                  {
                    rules: [{ required: true, message: '请输入账号' }],
                  },
                ]"
              >
                <img
                  class="prefixClass"
                  slot="prefix"
                  src="@/assets/login/zh.svg"
                />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                placeholder="请输入密码"
                size="large"
                type="password"
                v-decorator="[
                  'password',
                  {
                    rules: [{ required: true, message: '请输入密码' }],
                  },
                ]"
              >
                <img
                  class="prefixClass"
                  slot="prefix"
                  src="@/assets/login/mm.svg"
                />
              </a-input>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 24 }">
              <a-button class="btnClass" type="round" html-type="submit">
                登录
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="versionClass">版本号：25.1.2.0</div>
    </div>
  </div>
</template>

<script>
import { notification } from "ant-design-vue";
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  created() {
    sessionStorage.clear();
    this.$store.commit("setIsShow", false);
  },
  mounted() {
    console.log(this.$route, "rrr32113");
  },
  methods: {
    handleSubmit(e) {
      if (e) {
        e.preventDefault();
      }
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.$POST("/pad/loginPad", values).then((res) => {
            console.log("ress", res);
            if (res.errorCode == "SUCCESS") {
              sessionStorage.setItem("myUserInfo", JSON.stringify(res.data));
              let params1 = {
                teacherId: res.data.id,
                loginKey: res.data.loginKey,
                uid: res.data.uid,
                page: 1,
                childCountPerPage: 1000,
              };

              this.$POST("/pad/multiGradeClass", params1).then((resovle) => {
                console.log("resovle", resovle);
                if (resovle.errorCode == "SUCCESS") {
                  console.log("resovle", resovle.data);
                  if (resovle.data.length > 0) {
                    sessionStorage.setItem(
                      "njList",
                      JSON.stringify(resovle.data)
                    );
                    sessionStorage.setItem("currentIndex", 0);
                    this.$router.push("/ChooseClass");
                  } else {
                    //无授权年级和班级q
                    console.log("该教师无授权的年级/班级");
                    notification.error({
                      message: "提示",
                      description: "该教师无授权的年级/班级！",
                    });
                  }
                }
              });
            } else {
              notification.error({
                message: "提示",
                description: res.errMsg || "登录失败，请重新尝试",
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.containsClass {
  width: 30vw;
  height: 100%;
  .bodyClass {
    width: 100%;
    height: 100%;
    background-size: cover; /* 图片覆盖整个容器 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-image: url("~@/assets/login/beijingtu_a.png");
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    & > div {
      width: 80%;
      .titleClass {
        font-size: 0.18rem;
        color: #0f6c80;
        margin-bottom: 0.15rem;
      }
      .boxClass {
        margin: 0 auto;
        width: 100%;
        background-color: #fff;
        border-radius: 0.06rem;
        padding: 0.15rem;
        & > div:first-child {
          color: #0dabf5;
          font-size: 0.14rem;
          margin-bottom: 0.15rem;
        }
        /deep/.ant-input-affix-wrapper .ant-input {
          border-radius: 0.1rem;
        }
        /deep/.ant-input-affix-wrapper .ant-input:not(:first-child) {
          padding-left: 0.25rem;
        }
        .prefixClass {
          width: 0.13rem;
          width: 0.13rem;
        }
        /deep/.ant-input-lg {
          height: 0.26rem;
        }
        .btnClass {
          margin-top: 0.3rem;
          width: 100%;
          height: 0.28rem;
          font-size: 0.13rem;
          letter-spacing: 0.03rem;
          text-indent: 0.03rem;
          background-color: #30daff;
          color: #fff;
        }
      }
    }
  }
}
.versionClass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-size: 0.11rem;
}
</style>